<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	       .content{
	       	margin:30px auto;
	       	text-align:center;
	       	background:#ccc;
	       	width:500px;
	       }

	</style>
</head>
<body>
	  <form class="content">
	  	<fieldset>
	  		<h1>用户注册信息表</h1>
	  	<p>名字:<input type="text" id="name"><span id="txt"></span></p>
	  	<p>姓氏:<input type="text" id="username"><span id="txt1"></span></p>
	  	<p>登录名:<input type="text" id="loadname"><span id="txt2"></span></p>
	  	<p>密码:<input type="text" id="password"><span id="txt3"></span></p>
	  	<p>再次输入密码:<input type="text" id="password1"><span id="txt4"></span></p>
	  	<p>电子邮箱:<input type="text"  id="email"><span id="txt5"></span></p>
	  	<p>性别:<input type="radio" name="gender" value="男">男
	  	        <input type="radio" name="gender" value="女">女</p>
	  	<p>头像:<input type="file" ></p>
	  	<p>爱好:<input type="checkbox">运动
	  	        <input type="checkbox">聊天
	            <input type="checkbox">玩游戏</p>
	    <p>出生年月:
				<input type="text" size="5" id="year">年
				<span id="txt6"></span>
					<select name="" id="">
						<option value="">一</option>
						<option value="">二</option>
						<option value="">三</option>
						<option value="">四</option>
						<option value="">五</option>
						<option value="">六</option>
						<option value="">七</option>
						<option value="">八</option>
						<option value="">九</option>
						<option value="">十</option>
						<option value="">十一</option>
						<option value="">十二</option>
					</select>月
				    <input type="text" size="5" id='day'>日
				    <span id="txt7"></span>
			     </p>
	    <p><input type="button"  value="提交">
	       <input type="button"  value="重填"></p>
	    </fieldset>
	  </form>
</body>
<script>
	    /*var n = 'cahcdc';
	    var reg =/^[^0-9\s]+$/;
        console.log(reg.test(n));
        if(reg.rest(name.value)==false){
               txt.innerText='输入错误';
        	}else{
               txt.innerText='';
        	}
        }*/
        var reg =/^[^0-9\s]+$/
        var reg1=/^[\u4e00-\u9fa5\w]+$/;
        var reg2=/^\w{6,}$/;
        var reg3=/^\w+\@\w+\.[a-z]{2,4}(\.[a-z]{2})?$/
        var reg4=/^\d{4}$/;				
		var reg5=/^([1-9]|[1-2]\d|[3][0-1])$/;
        function $(id){
        	return document.getElementById(id);
            }
          $('name').onblur=function(){
		  if(reg.test($('name').value)==false){
		    
		   $('txt').innerText='姓名不能为空且不能有数字';
		   txt.style.fontSize="10px";
	       }else{
	       	$('txt').innerText=''; 
        }}
          $('username').onblur=function(){
		  if(reg.test($('username').value)==false){
		    
		   $('txt1').innerText='姓名不能为空且不能有数字';
		   txt1.style.fontSize="10px";
	       }else{
	       	$('txt1').innerText=''; 
        }}
          $('loadname').onblur=function(){
		  if(reg1.test($('loadname').value)==false){
		    
		   $('txt2').innerText='登录名包含字母、数字、下划线';
		   txt2.style.fontSize="10px";
	       }else{
	       	$('txt2').innerText=''; 
        }}
          $('password').onblur=function(){
		  if(reg2.test($('password').value)==false){
		    
		   $('txt3').innerText='密码必须为6位以上字母、数字、下划线组成';
		   txt3.style.fontSize="10px";
	       }else{
	       	$('txt3').innerText=''; 
        }}
          $('password1').onblur=function(){
		  if(reg2.test($('password1').value)==false){
		    
		   $('txt4').innerText='请输入相同的密码';
		   txt4.style.fontSize="10px";
	       }else{
	       	$('txt4').innerText=''; 
        }}
          $('email').onblur=function(){
		  if(reg3.test($('email').value)==false){
		    
		   $('txt5').innerText='格式错误,格式如123@sina.com格式';
		   txt5.style.fontSize="10px";
	       }else{
	       	$('txt5').innerText=''; 
        }}
          $('year').onblur=function(){
		  if(reg4.test($('year').value)==false){
		    
		   $('txt6').innerText='填写正确的年份';
		   txt6.style.fontSize="10px";
	       }else{
	       	$('txt6').innerText=''; 
        }}
          $('day').onblur=function(){
		  if(reg5.test($('day').value)==false){
		    
		   $('txt7').innerText='日期需在1-31之间';
		   txt7.style.fontSize="10px";
	       }else{
	       $('txt7').innerText=''; 
        }}

</script>
</html>